<template>
	<view class="content">
		<view class="naviga_tion">
			<uni-icons type="bars" size="30" @click="modularToolFn"></uni-icons>
			<view class="">

			</view>
			<!-- <uni-icons type="help" size="30" @click="modulet"></uni-icons> -->

			<!-- 				<u-icon name="list-dot" color="#000000" ></u-icon>
			<u-icon name="help" color="#000000" size="30" @click="modulet"></u-icon> -->
		</view>
		<view class="text-area">
			<!-- <web-view src="https://cli.im/share/YRCUy65"></web-view> -->
			<view class="box box_a" hover-class="hvbox" @click="intelligentVehicleFn">
				<image class="img" src="@/static/gcheng5.png" mode=""></image>
				<view class="text">
					测流量水
				</view>
			</view>
			<view class="box box_b" hover-class="hvbox" @click="dataMonitoringFn">
				<image class="img" src="@/static/shouji.png" mode=""></image>
				<view class="text">
					水情监测
				</view>
			</view>
			<view class="box box_c" hover-class="hvbox" @click="shipjk">
				<image class="img" src="@/static/ship.png" mode=""></image>
				<view class="text">
					视频监控
				</view>
			</view>
			<view class="box box_d" hover-class="hvbox" @click="gateingFn">
				<image class="img" src="@/static/zham.png" mode=""></image>
				<view class="text">
					闸门控制
				</view>
			</view>
			<!-- <view class="hanggao">

			</view> -->
			<view class="box box_e" hover-class="hvbox" @click="shipjk">
				<image class="img" src="@/static/jiank.png" mode=""></image>
				<view class="text">
					供水调度
				</view>
			</view>
			<!-- 			<view class="box box_d" hover-class="hvbox">
				<image class="img" src="@/static/peiz.png" mode=""></image>
				<view class="text">
					配水调度
				</view>
			</view> -->
			<view class="box box_f" hover-class="hvbox" @click="shipjk">
				<image class="img" src="@/static/gcheng2.png" mode=""></image>
				<view class="text">
					用水管理
				</view>
			</view>
			<!-- <view class="hanggao">

			</view> -->
			<view class="box box_g" hover-class="hvbox" @click="shipjk">
				<image class="img" src="@/static/gcheng1.png" mode=""></image>
				<view class="text">
					工程管理
				</view>
			</view>
			<view class="box box_h" hover-class="hvbox" @click="shipjk">
				<image class="img" src="@/static/gcheng3.png" mode=""></image>
				<view class="text">
					孪生应用
				</view>
			</view>
		</view>
		<view class="text-arc">
			供用水管理综合业务平台移动客户端
		</view>
		<!-- <button @click="ceshi">测试</button> -->


		<!-- 		<u-modal showCancelButton :show="showIF" title="是否退出登录" @confirm="confirmFn" @cancel="cancelFn"></u-modal> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showToasttet: '',
				showIF: false
			}
		},
		onLoad() {
			this.infoProFn()
		},
		methods: {
			// 草料二维码
			modulet() {
				uni.navigateTo({
					url: '/pages/index/homeMenu'
				});
			},
			// 功能
			iconFn() {
				//在起始页面跳转到test.vue页面并传递参数
				uni.navigateTo({
					url: '/pages/feature/index'
				});
			},
			// 查看版本
			viewVersion() {
				uni.navigateTo({
					url: '/pages/index/renewal'
				});
			},
			// 模块
			modularToolFn() {
				uni.navigateTo({
					url: '/pages/settings/accountManagement'
				});
			},
			// 测流量水
			intelligentVehicleFn() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			//水情监测
			dataMonitoringFn() {
				uni.navigateTo({
					url: '/pages/waterMonitoring/index'
				});
			},
			// 视频监控
			shipjk() {
				uni.navigateTo({
					url: '/pages/index/deploymentPage'
				});
			},
			// 闸门控制
			gateingFn() {
				uni.navigateTo({
					url: '/pages/waterSupplyManagement/home'
				});
			},
			// 登录用户信息
			infoProFn() {
				console.log('登录断面');
				uni.$u.http.get('/system/user/profile').then(res => {
					if (res.code == 200) {
						console.log('登录用户信息--');
					} else {
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			// 测试
			testDataFn() {
				// uni.redirectTo({
				// 	url: '/pages/testData'
				// });
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		text-align: center;

		// 导航
		.naviga_tion {
			padding: 80rpx 30rpx 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #000000;
			// background-color: rgba(0, 0, 0, 0);
		}

		.text-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #000000;

			.hanggao {
				height: 30rpx;
			}

			.box {
				width: 600rpx;
				padding: 20rpx;
				border: 5rpx solid #000000;
				border-radius: 30rpx;
				margin: 10rpx;
				background-color: #cce7f3;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.img {
					width: 90rpx;
					height: 90rpx;
				}

				.text {
					font-size: 50rpx;
				}
			}

			.box_a {
				background-color: #fffedd;
			}

			.box_b {
				background-color: #eaffff;
			}

			.box_c {
				background-color: #f5ffee;
			}

			.box_d {
				background-color: #f2f4ff;
			}

			.box_e {
				background-color: #f7feff;
			}

			.box_f {
				background-color: #f8faff;
			}

			.box_g {
				background-color: #f7fffb;
			}

			.box_h {
				background-color: #fbfdff;
			}

			.hvbox {
				background-color: rgba(0, 0, 0, 0.1);
			}

			.box_style {
				width: 600rpx;
				margin-top: 20rpx;
			}
		}

		.text-arc {
			// position: fixed;
			// bottom: 80rpx;
			// color: #5a5a5a;
			// left: 0;
			// right: 0;
			// width: 100%;
			// font-size: 35rpx;
			margin: 80rpx 0;
			text-align: center;
			/* 文字水平居中 */

			.hvbox {
				background-color: rgba(0, 0, 0, 0.1);
			}
		}
	}

	.custom-style {
		background-color: #f1f4f6;
	}
</style>
<style>
	page {
		background-color: #ecf6fa;
	}
</style>